import React, { Component } from 'react'
import './css/reset.css'
import './css/style.css'

const URL_LOGIN = "http://10.254.251.233/api/xsse/userLogin.json";

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ip: '',
            port: '',
            username: '',
            token: '',
            ipHelp: '',
            portHelp: '',
            usernameHelp: '',
            tokenHelp: '',
        }
        //bind
        this.onIpChange = this.onIpChange.bind(this);
        this.onPortChange = this.onPortChange.bind(this);
        this.onUsernameChange = this.onUsernameChange.bind(this);
        this.onTokenChange = this.onTokenChange.bind(this);
        this.onLogin = this.onLogin.bind(this);
        this.onIpFocus = this.onIpFocus.bind(this);
        this.onPortFocus = this.onPortFocus.bind(this);
        this.onUsernameFocus = this.onUsernameFocus.bind(this);
        this.onTokenFocus = this.onTokenFocus.bind(this);
    }

    /**
     * 登录校验
     * @param {*} e 
     */
    checkLogin(e) {
        let isIPEmpty = this.state.ip === "" || this.state.ip === null;
        this.setState({ ipHelp: isIPEmpty ? "* IP不能为空" : "" });

        let isPortEmpty = this.state.port === "" || this.state.port === null;
        this.setState({ portHelp: isPortEmpty ? "* 端口号不能为空" : "" });

        let isUsernameEmpty = this.state.username === "" || this.state.username === null;
        this.setState({ usernameHelp: isUsernameEmpty ? "* 用户名不能为空" : "" });

        let isTokenEmpty = this.state.token === "" || this.state.token === null;
        this.setState({ tokenHelp: isTokenEmpty ? "* TOKEN不能为空" : "" });


        return !(isIPEmpty || isPortEmpty || isUsernameEmpty || isTokenEmpty);
    }

    /**
     * 登录触发
     * @param {*} e 
     */
    onLogin(e) {
        e.preventDefault();
        let isOk = this.checkLogin(e);

        if (isOk) {
            console.log("前端校验通过");
            let data = this.getParam(e);
            this.toFetch(URL_LOGIN, data);
        }
    }

    /**
     * 获取表单数据
     * @param {*} e 
     */
    getParam(e) {
        return "?ip" + "=" + this.state.ip + "&mac" + "=" + this.state.ip + "&token" + "=" + this.state.token;
    }

    /**
     * 获取本机MAC
     * @param {*} e 
     */
    getMac(e) {

    }

    /**
     * 向服务器发送请求
     * @param {url} url 
     * @param {请求数据 ip,mac,token} data 
     */
    toFetch(url, data) {
        console.log("开始发送登录请求，登录url=" + url + data);
        fetch(url + data, {
            method: "GET", // *GET, POST, PUT, DELETE, etc.
            mode: "cors", // no-cors, cors, *same-origin
            cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
            credentials: "same-origin", // include, *same-origin, omit
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
            redirect: "follow", // manual, *follow, error
            referrer: "no-referrer", // no-referrer, *client
        })
            .then(response => response.json()).then(
                data => {
                    if (data.ret_code === 0) {
                        console.log("登录成功！登录返回信息："+JSON.stringify(data));
                        this.loginOk(data);
                    } else {
                        console.log("登录失败！登录返回信息："+JSON.stringify(data));
                        this.loginFaild(data);
                    }
                }) // JSON-string from `response.json()` call
            .catch(error => {
                console.error(error)
                window.alert("登录失败：" + error);
            }); // parses response to JSON
    }

    /**登录成功 */
    loginOk = (data) => {
        window.alert("登录成功：" + data.ret_msg);
    }

    /**登录失败 */
    loginFaild = (data) => {
        window.alert("登录失败：" + data.ret_msg);
    }

    onIpChange(e) {
        let val = e.target.value;
        this.setState({ ip: val });
    }

    onPortChange(e) {
        let val = e.target.value;
        this.setState({ port: val });
    }

    onUsernameChange(e) {
        let val = e.target.value;
        this.setState({ username: val });
    }

    onTokenChange(e) {
        let val = e.target.value;
        this.setState({ token: val });
    }

    onIpFocus(e) {
        this.setState({ ipHelp: '' });
    }

    onPortFocus(e) {
        this.setState({ portHelp: '' });
    }

    onUsernameFocus(e) {
        this.setState({ usernameHelp: '' });
    }

    onTokenFocus(e) {
        this.setState({ tokenHelp: '' });
    }

    render() {
        return (
            <div id="particles-js">

                <div className="login">
                    <div className="login-top">
                        登录
			</div>
                    <div className="login-center clearfix">
                        <div className="login-center-img"><img src={require('./img/name.png')} alt="" /></div>
                        <div className="login-center-input">
                            <input type="text" name="" placeholder="请输入您的IP" value={this.state.ip} onChange={this.onIpChange} onFocus={this.onIpFocus} />
                            <div className="login-center-input-text">IP</div>
                            <span className="help-block">{this.state.ipHelp}</span>
                        </div>
                    </div>
                    <div className="login-center clearfix">
                        <div className="login-center-img"><img src={require('./img/name.png')} alt="" /></div>
                        <div className="login-center-input">
                            <input type="text" name="" placeholder="请输入您的端口号" value={this.state.port} onChange={this.onPortChange} onFocus={this.onPortFocus} />
                            <div className="login-center-input-text">端口</div>
                            <span className="help-block">{this.state.portHelp}</span>
                        </div>
                    </div>
                    <div className="login-center clearfix">
                        <div className="login-center-img"><img src={require('./img/name.png')} alt="" /></div>
                        <div className="login-center-input">
                            <input type="text" name="" placeholder="请输入您的用户名" value={this.state.username} onChange={this.onUsernameChange} onFocus={this.onUsernameFocus} />
                            <div className="login-center-input-text">用户名</div>
                            <span className="help-block">{this.state.usernameHelp}</span>
                        </div>
                    </div>
                    <div className="login-center clearfix">
                        <div className="login-center-img"><img src={require('./img/password.png')} alt="" /></div>
                        <div className="login-center-input">
                            <input type="password" name="" placeholder="请输入您的TOKEN" value={this.state.token} onChange={this.onTokenChange} onFocus={this.onTokenFocus} />
                            <div className="login-center-input-text">TOKEN</div>
                            <span className="help-block">{this.state.tokenHelp}</span>
                        </div>
                    </div>
                    <div className="login-button" onClick={this.onLogin}>登录</div>
                </div>
                <div className="sk-rotating-plane"></div>
            </div>
        )
    }
}

export default Login